<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 用户输入评论 -->
        <textarea name="" id="" cols="30" rows="10" v-model='pg'></textarea>
        <button @click='add'>发布评论</button>
        <ul>
            <li v-for='(item,index) in list'>{{ item.name }} : {{ item.contents }}  点赞:{{ item.count }}
                <button @click='sum(item)'>点赞</button>
                <button @click='sorting(item,index)'>置顶</button>
                <button @click='sub(index)'>删除</button>
            </li>
        </ul>
        <!-- 渲染用户的评论 -->
        <div></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                ipt: '',
                list: [
                    {
                        id: 1,
                        name: '茄子',
                        contents: '住在山里的感觉整不错!',
                        count: 0,
                        time: '2021-10-11',
                        aa:true
                    },
                    {
                        id: 2,
                        name: 'jy',
                        contents: '今天天气真不错! 是个打csgo的好日子!',
                        count: 0,
                        time: '2021-10-12',
                        aa:true
                    },
                ],
                pg:''
            },
            methods:{
                add:function(){
                    let obj={};
                    obj.id=this.list.length+1;
                    obj.name='帅哥';
                    obj.count=0;
                    obj.contents=this.pg;
                    obj.aa=true
                    this.list.push(obj)
                },
                sum:function(item){
                    if(item.aa===true){
                       item.count++
                       item.aa=!item.aa
                   }else{
                    item.count--
                    item.aa=!item.aa
                   }
                },
                sub:function(index){
                    this.list.splice(index,1);
                },
                sorting:function(item,index){
                    this.list.splice(index,1);
                    this.list.unshift(item)
                    
                }
            }
        })
    </script>
</body>

</html>